<template>
	<div class="pageSize">
		<div>
			<span class="el-pagination__total">共 {{ total }} 条记录</span>
			<span class="el-pagination__total"
				>第{{ pageNum }}/{{
					Math.ceil(total / pageSize) === 0 ? 1 : Math.ceil(total / pageSize)
				}}页</span
			>
		</div>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="pageNum"
			:pager-count = "5"
			:page-sizes="pageSizes"
			:page-size="pageSize"
			layout="prev, pager, next,sizes, jumper"
			:total="total"
			background
		></el-pagination>
	</div>
</template>
<script>
export default {
	name:'PageSize',
	props: {
		total: {
			type: Number,
			default: 0,
		},
		//页码
		pageNum: {
			type: Number,
			default: 0,
		},
		//行数
		pageSize: {
			type: Number,
			default: 1,
		},
		pageSizes: {
			type: Array,
			default() {
				return [10, 20, 50, 100];
			},
		},
	},
	methods: {
		handleSizeChange(size) {
			this.$emit("size-change", size);
			this.fixRoute({size});
		},
		handleCurrentChange(page) {
			this.$emit("current-change", page);
			this.fixRoute({page})
		},

		/** 
		 * 路由集成
		 * @param {pairs} 键值对 hash键值对 
		 * **/
		fixRoute(pairs){
			let query = JSON.parse(JSON.stringify(this.$route.query));
			const keys = Object.keys(pairs);
			for (let item of keys) {
				query[item] = pairs[item];
			}
			this.$router
				.replace({ path: this.$route.path, query })
				.catch( err => { err });
		}
	},
};
</script>
<style lang="scss" scoped>
$blue: #144fba;
	.pageSize {
		height: 60px;
		padding: 0 20px 0 20px;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.el-pagination__total{
			font-size: 14px;
		}
	}
  ::v-deep {
    .el-pager li:not(.disabled).active {
        background-color: $blue !important;
        color: #FFF;
    }
    .el-pager li:not(.disabled):not(.active):hover {
      color: $blue !important;
    }
  }
</style>
